<template>
  <div class="login-wrap" style="background-color: #fff">
    <div class="leftLogo">
      <img src="../assets/img/loginLeft.png" alt="" />
    </div>
    <el-form
      label-position="left"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="0px"
      class="demo-ruleForm login-container"
    >
      <div class="loginTab">
        <div v-for="(item, index) in tabCar" :key="index" class="tabCar">
          <p @click="tab(index)" :class="{ actives: index == num }">
            {{ item.text }}
          </p>
        </div>
      </div>
      <div class="passLogin" v-if="num == 0">
        <el-form-item prop="username" class="phoneInput">
          <h1>用户名</h1>
          <div class="phones">
            <el-input
              type="text"
              v-model="ruleForm.username"
              @keyup.enter.native="submitForm('ruleForm')"
              auto-complete="off"
              placeholder="请输入用户名"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password" class="phoneInput passInput">
          <h1>密码</h1>
          <el-input
            type="password"
            v-model="ruleForm.password"
            @keyup.enter.native="submitForm('ruleForm')"
            auto-complete="off"
            placeholder="请填写密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" class="phoneInput codeInput">
          <h1>验证码</h1>
          <el-input
            style="float: left"
            v-model="ruleForm.code"
            @keyup.enter.native="submitForm('ruleForm')"
            autocomplete="off"
            placeholder="请输入验证码"
          >
          </el-input>
          <div
            style="
              float: right;
              position: absolute;
              display: flex;
              right: 0;
              bottom: 0px;
              height: 50px;
            "
          >
            <img :src="identifyingImg" @click="identifyingCode" />
          </div>
        </el-form-item>
        <!-- <div class="forget" @click="forget()">忘记密码</div> -->
        <el-form-item id="loginIndex">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="logining"
            style="width: 80%; margin-left: 10%"
            >登录</el-button
          >
        </el-form-item>
      </div>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
import { setCookie, getCookie, delCookie } from "../utils/util";
export default {
  name: "login",
  data() {
    return {
      identifyingNumber: "", // 验证码随机数
      identifyingImg: "", //　验证码图片
      // 验证码
      showTime: true /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      sendTime: "" /* 倒计时 计数器 */,
      timer: null,
      num: 0,
      tabCar: [{ text: "用户登录" }],
      //定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: "",
      ruleForm: {
        //密码登录----username和password默认为空
        username: "",
        password: "",
        code: "",
      },
      // rules前端验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.getuserpwd();
    this.identifyingCode(); // 获取验证码图片用的随机数
  },
  // 里面的函数只有调用才会执行
  methods: {
    forget() {
      this.$router.push({ path: "./forgetPass" });
    },
    // 选项卡
    tab(index) {
      this.num = index;
    },
    // 获取验证码随机数
    identifyingCode() {
      let that = this;
      this.identifyingNumber = this.getrand(0, 10000000000000000);
      this.identifyingImg =
        "http://cmsapi.lyqswl.com/admin.php/Login/verify?rand=" +
        this.identifyingNumber;
      // this.identifyingImg =
      //   "http://192.168.1.107/admin.php/Login/verify?rand=" +
      //   this.identifyingNumber;
    },
    getrand(m, n) {
      var rand = Math.floor(Math.random() * (n - m + 1)) + m; //#核心代码
      return rand;
    },
    // 获取用户名密码
    getuserpwd() {
      if (getCookie("user") != "" && getCookie("pwd") != "") {
        this.ruleForm.username = getCookie("user");
        this.ruleForm.password = getCookie("pwd");
        this.rememberpwd = true;
      }
    },
    //获取密码登录
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            name: this.ruleForm.username,
            password: this.ruleForm.password,
            code: this.ruleForm.code,
            rand: this.identifyingNumber,
          };
          this.$cmsapi
            .UserLand(data)
            .then((res) => {
              if (res.code === 0) {
                that.$store.commit("serUserName",that.ruleForm.username);
                if (that.rememberpwd) {
                  //保存帐号到cookie，有效期7天
                  setCookie("user", that.ruleForm.username, 1);
                  //保存密码到cookie，有效期7天
                  setCookie("pwd", that.ruleForm.password, 1);
                } else {
                  delCookie("user");
                  delCookie("pwd");
                }
                // 弹出登录成功
                //如果请求成功就让他2秒跳转路由
                setTimeout(() => {
                  that.$message({
                    message: "登录成功",
                    type: "success",
                  });
                  that.logining = false;
                  // 缓存token
                  localStorage.setItem("logintoken", res.data);
                  // 缓存用户个人信息
                  localStorage.setItem("userdata", JSON.stringify(res.data));
                  that.$store.commit("login", "true");
                  that.$router.push({
                    name: "ReplyPanelsList",
                    params: {
                      password: that.ruleForm.password,
                    },
                  });
                }, 1000);
              } else {
                that.$message.error(res.msg);
                that.identifyingCode();
              }
            })
            .catch((error) => {
              console.log(error.message);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.login-wrap {
  display: flex;
  background-color: #fff;
}
.leftLogo {
  width: 30%;
}
.leftLogo img {
  width: 100%;
  height: 100vh;
  display: block;
}
.logoLeft {
  width: 102px;
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  margin-left: 40px;
}
.logoShop {
  width: 282px;
  font-size: 44px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  margin-left: 85px;
  margin-top: 109px;
}

.login-container {
  width: 35%;
  margin: 0 auto;
  /* border: 1px solid red; */
}
.loginTab {
  margin: 0 auto;
  font-size: 22px;
  font-family: Microsoft YaHei;
  color: #b6b6b6;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  margin-top: 8rem;
}
.loginTab .tabCar {
  border-right: 1px solid #e1e1e1;
  text-align: center;
  width: 50%;
}
.loginTab .tabCar:last-child {
  border-right: none;
}
.actives {
  color: #3d3d3d !important;
}
.passLogin,
.messLogin {
  margin-top: 10%;
}
/*手机号*/
.phoneInput {
  border-bottom: 1px solid #eeeeee;
  outline: 0;
  width: 100%;
  outline: none;
  height: 100px;
  padding-left: 14px;
  box-sizing: border-box;
}
.phoneInput h1 {
  font-size: 20px;
}
.phoneInput .phones {
  display: flex;
  margin-top: 1.1rem;
}
.phoneInput .phones img {
  vertical-align: middle;
  width: 23%;
}
.phoneInput .types {
  width: 13%;
  font-size: 20px;
  color: #666666;
}
/deep/.phoneInput .el-input__inner {
  outline: 0;
  border: none;
  width: 300px;
  font-size: 16px;
  color: #5b5a5a;
}
/deep/ .phoneInput .el-input {
  width: 85%;
}
/*密码框*/
.passInput {
  margin-top: 38px;
}
/deep/.passInput .el-input__inner {
  width: 100%;
  padding: 0;
  margin-top: 0.7rem;
}
/*手机号提示*/
/deep/.phoneInput .el-form-item__error {
  color: #f56c6c;
  font-size: 14px;
  position: absolute;
  top: 118%;
  left: 1%;
}
/* 忘记密码 */
.forget {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-decoration: underline;
  color: #b6b6b6;
  text-align: right;
  margin-top: 21px;
  cursor: pointer;
}

/* 登录 */
#loginIndex .el-button--primary {
  height: 60px;
  margin-top: 2rem;
  font-size: 20px;
  background: #436af2;
  border-radius: 10px;
}
/* 短信登录 */
#loginScend .el-button--primary {
  width: 520px;
  height: 65px;
  margin-top: 4rem;
  font-size: 20px;
  background: #436af2;
  border-radius: 10px;
}
/* 验证码 */
.codeInput {
  margin-top: 38px;
}
/deep/ .codeInput .el-input__inner {
  padding: 0;
  width: 400px;
  margin-top: 0.7rem;
}
/deep/ .codeInput .el-input-group__append {
  border: none;
  color: #436af2;
  font-size: 20px;
  padding-top: 0.7rem;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #fff;
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin-top: 10px;
}
</style>